<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>陆娇蓝-作业</title>
        <style type="text/css">
            body,p,img,h2,h4{
                margin: 0;
                padding: 0;
            }
            a{
                text-decoration: none;
            }
            h1{
                color: rgb(7,57,91);
            }
            .wrapper{
                width: 100%;
                font-family: Arial;
            }
            .more{
                display: inline-block;
                height: 34px;
                padding: 0 20px;
                margin-top: 30px;
                /*margin-left: 30px;*/
                line-height: 34px;
                font-size: 13px;
                font-weight: bolder;
                color: white;
                background-image: url("Imgs/btn-bg.jpg");
                background-repeat: repeat-x;
            }
            .para{
                font-size: 10px;
                color: rgb(165,164,167);
            }
            header{
                width: 100%;
                height: 160px;
                text-align: center;
                /*line-height: 150px;*/
                background-color: rgb(35,36,37);
            }
            header img{
                margin-top: 25px;
            }
            nav{
                width: 100%;
                height: 72px;
                text-align: center;
                background-color: rgb(134,205,215);
            }
            nav a{
                display: inline-block;
                height: 34px;
                padding: 0 20px;
                margin-top: 19px;
                margin-left: 30px;
                line-height: 34px;
                font-size: 17px;
                font-weight: bolder;
                color: rgb(38,87,112);
            }
            nav a:hover,
            nav>:first-child{
                color: white;
                background-image: url("Imgs/btn-bg.jpg");
                background-repeat: repeat-x;
            }
            .cont01{
                width: 100%;
                background-color: rgb(239,240,241);
            }
            .slider{
                position: relative;
                top: 40px;
                left: 207px;
                width: 1025px;
                height: 503px;
                background-image: url("Imgs/slider.jpg");
                background-position: center;
            }
            .slider p{
                position: absolute;
                top: 423px;
                display: block;
                width: 1025px;
                height: 80px;
                color: white;
                font-size: xx-large;
                font-weight: 900;
                text-align: center;
                line-height: 80px;
                background-color: rgba(0,0,0,0.3);
            }
            .cont01-text,
            .cont02-text{
                width: 1025px;
                /*height: 100px;*/
                text-align: center;
                margin-top: 100px;
                margin-left: 207px;
                padding-bottom: 40px;
            }
            .cont01-col,
            .cont02-col{
                text-align: left;
                margin-left: 20px;
                display: inline-block;
                width: 220px;
            }
            .cont01-col p,
            .cont02-col p{
                display: inline-block;
                width: 210px;
                font-size: 10px;
                color: rgb(165,164,167);
                margin-top: 15px;
                text-align: left;
            }
            .cont01-col img{
                display: block;
                float: left;
            }
            .cont01-col h4,
            .cont02-col h4{
                display: block;
                float: left;
                margin-top: 20px;
                font-weight: 300;
                color: rgb(23,80,122);
            }
            .cont01-text>:first-child,
            .cont02-text>:first-child{
                margin-left: 0;
            }
            .cont02{
                width: 100%;
                padding-bottom: 40px;
                text-align: right;
                border-top: 1px solid rgb(200,205,206);
                border-bottom: 1px solid rgb(223,224,225);
                background: -webkit-gradient(linear,0 0,0 100%,from(rgb(225,233,233)),to(rgb(243,244,245)));
                background: -moz-linear-gradient(top,rgb(225,233,233),rgb(243,244,245));
            }
            .cont02-col h4{
                padding: 10px 0;
                color: black;
            }
            #prev,
            #next{
                width: 29px;
                height: 29px;
                background-color: rgb(21,103,136);
                margin-top: 80px;
                margin-bottom: 10px;
            }
            #next{
                margin-right: 244px;
            }
            .cont02-text{
                margin-top: 0;
            }
            .cont03{
                width: 100%;
                height: 514px;
                background-color: rgb(240,241,242);
                text-align: center;
            }
            .cont03-cont{
                width: 960px;
                margin: 0 auto;
            }
            .cont03-left{
                float: left;
                width: 540px;
                border-right: 1px solid rgb(223,224,225);
                text-align: left;
                padding-top: 80px;
                padding-bottom: 80px;
            }
            .cont03-img{
                display: block;
                float: left;
            }
            .para1{
                width: 270px;
                float: left;
                margin-left: 20px;
                line-height: 17px;
                margin-bottom: 30px;
            }
            .para1 p{
                font-size: 13px;
                padding-bottom: 15px;
            }
            .para1 a{
                color: rgb(231,130,88);
            }
            .para1 a:hover{
                text-decoration: underline;
            }
            .para2{
                width: 500px;
                clear: both;
                line-height: 17px;
            }
            .cont03-right{
                float: left;
                width: 400px;
                margin-top: 80px;
                text-align: left;
                margin-left: 15px;
            }
            .para3{
                width: 350px;
                clear: both;
                line-height: 17px;
            }
            .para1 p{
                padding: 0;
            }
            .top{
                margin-bottom: 40px;
            }
            footer{
                width: 100%;
                height: 50px;
                background-color: rgb(134, 206, 216);
                font-size: xx-small;
                line-height: 50px;
            }
            .footer{
                position: relative;
                width: 960px;
                margin: 0 auto;
            }
            footer img{
                width: 25px;
                height: 25px;
            }
            #footer-img1{
                position: absolute;
                top: 14px;
                right: 60px;
            }
            #footer-img2{
                position: absolute;
                top: 14px;
                right: 30px;
            }
            #footer-img3{
                position: absolute;
                top: 14px;
                right: 0;
            }
            #totop{
                position: fixed;
                bottom: 60px;
                right: 150px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <header>
                <a name="top"><img src="Imgs/logo.png"></a>
            </header>
            <nav>
                <a href="#">HOME</a>
                <a href="#">ABOUT</a>
                <a href="#">PROJECTS</a>
                <a href="#">SERVICES</a>
                <a href="#">CONTACTS</a>
            </nav>
            <div class="cont01">
                <div class="slider">
                    <p>The World of Opportunities</p>
                </div>
                <div class="cont01-text">
                    <div class="cont01-col">
                        <img src="Imgs/img1.png">
                        <h4>STANDARDS</h4>
                        <p>At vero eos et accusamus et lusto odio dignissmos ducimu bi abd maybe you can always try your best to do your work</p>
                    </div>
                    <div class="cont01-col">
                        <img src="Imgs/img2.png">
                        <h4>PRINCIPLES</h4>
                        <p>At vero eos et accusamus et lusto odio dignissmos ducimu bi abd maybe you can always try your best to do your work</p>
                    </div>
                    <div class="cont01-col">
                        <img src="Imgs/img3.png">
                        <h4>EXPERIENCE</h4>
                        <p>At vero eos et accusamus et lusto odio dignissmos ducimu bi abd maybe you can always try your best to do your work</p>
                    </div>
                    <div class="cont01-col">
                        <img src="Imgs/img4.png">
                        <h4>CLIENT REVIEWS</h4>
                        <p>At vero eos et accusamus et lusto odio dignissmos ducimu bi abd maybe you can always try your best to do your work</p>
                    </div>
                </div>
            </div>
            <div class="cont02">
                <a href="#"><img src="Imgs/prev.png" id="prev"></a>
                <a href="#"><img src="Imgs/next.png" id="next"></a>
                <div class="cont02-text">
                    <div class="cont02-col">
                        <img src="Imgs/img5.jpg">
                        <h4>BUSINESS ANALYTICS</h4>
                        <p>At vero eos et accusamus et lusto odio dignissmos ducimus pul bi abd maybe you can always try your best to do your work At vero eos et accusamus et lusto odio dignissmos ducimus pul bi abd maybe you can always try your best to do your work</p>
                        <a href="#" class="more">MORE</a>
                    </div>
                    <div class="cont02-col">
                        <img src="Imgs/img6.jpg">
                        <h4>GROWTH STRATEGIES</h4>
                        <p>At vero eos et accusamus et lusto odio dignissmos ducimus pul bi abd maybe you can always try your best to do your work At vero eos et accusamus et lusto odio dignissmos ducimus pul bi abd maybe you can always try your best to do your work</p>
                        <a href="#" class="more">MORE</a>
                    </div>
                    <div class="cont02-col">
                        <img src="Imgs/img7.jpg">
                        <h4>SMARTER COMMERCE</h4>
                        <p>At vero eos et accusamus et lusto odio dignissmos ducimus pul bi abd maybe you can always try your best to do your work At vero eos et accusamus et lusto odio dignissmos ducimus pul bi abd maybe you can always try your best to do your work</p>
                        <a href="#" class="more">MORE</a>
                    </div>
                    <div class="cont02-col">
                        <img src="Imgs/img8.jpg">
                        <h4>MARKET RESEARCH</h4>
                        <p>At vero eos et accusamus et lusto odio dignissmos ducimus pul bi abd maybe you can always try your best to do your work At vero eos et accusamus et lusto odio dignissmos ducimus pul bi abd maybe you can always try your best to do your work</p>
                        <a href="#" class="more">MORE</a>
                    </div>
                </div>
            </div>
            <div class="cont03">
                <div class="cont03-cont">
                    <div class="cont03-left">
                        <h1>ABOUT US</h1>
                        <div class="cont03-left-text">
                            <img src="Imgs/img9.jpg" class="cont03-img">
                            <div class="para1">
                                <p><a href="#">Click here</a> At vero eos et accusamus et lusto odio dignissmos ducimus</p>
                                <span class="para">At vero eos et accusamus et lusto odio dignissmos ducimus pul bi abd maybe you can always try your best to do your work maybe you can always try your best to do your work maybe you can always try your best to do your work</span>
                            </div>
                            <p class="para para2">At vero eos et accusamus et lusto odio dignissmos ducimus pul bi abd maybe you can always try your best to do your work maybe you can always try your best to do your work maybe you can always try your best to do your work maybe you can always try your best to do your work</p>
                        </div>
                        <a href="#" class="more">MORE</a>
                    </div>
                    <div class="cont03-right">
                        <h1>LATEST NEWS</h1>
                        <div class="cont03-right-text top">
                            <img src="Imgs/icon4.png" class="cont03-img">
                            <div class="para1">
                                <p>vero eos et accusamus et lusto</p>
                                <p>April 27.03.12</p>
                            </div>
                            <p class="para para3">At vero eos et accusamus et lusto odio dignissmos ducimus pul bi abd maybe you can always try your best to do your work</p>
                        </div>
                        <div class="cont03-right-text">
                            <img src="Imgs/icon5.png" class="cont03-img">
                            <div class="para1">
                                <p>vero eos et accusamus et lusto</p>
                                <p style="color: rgb(231,130,88)">April 27.03.12</p>
                            </div>
                            <p class="para para3">At vero eos et accusamus et lusto odio dignissmos ducimus pul bi abd maybe you can always try your best to do your work</p>
                        </div>
                    </div>
                </div>
            </div>
            <a href="#top"><img src="Imgs/totop.png" id="totop"></a>
            <footer>
                <div class="footer">
                    <span style="opacity: 0.4">BIZZ @ 2013 | PRIVACY | WEBSITE DESIGNED BY TEMPLATEMONSTER.COM</span>
                    <img style="opacity: 0.4" src="Imgs/icon1.png" id="footer-img1">
                    <img style="opacity: 0.4" src="Imgs/icon2.png" id="footer-img2">
                    <img style="opacity: 0.4" src="Imgs/icon3.png" id="footer-img3">
                </div>
            </footer>
        </div>
    </body>
</html>